<template>
  <span v-for="slotItem in compatibleColumns" :key="slotItem.key">
    <div
      v-if="headerCellScoped.column.key === slotItem.key"
      class="TypeColmun-cell"
    >
      <TypeColumnRenderHeader
        v-if="
          getCompatibleSlotScoped(headerCellScoped).column._renderHeader
        "
        v-bind="getCompatibleSlotScoped(headerCellScoped)"
      />
      <span v-else class="TypeColmun-header-cell" v-text="getCompatibleSlotScoped(headerCellScoped).column.label" />
      <el-tooltip
        v-if="
          getCompatibleSlotScoped(headerCellScoped).column.headerNotic
        "
        :content="
          getCompatibleSlotScoped(headerCellScoped).column.headerNotic
        "
        placement="top"
        effect="dark"
      >
        <el-icon class="TypeColmun-header-notic-icon"><PacvueIconErrorTip /></el-icon>
      </el-tooltip>
    </div>
    <CustomHeader
      v-if="slotItem.children && slotItem.children.length"
      :compatible-columns="slotItem.children"
      :header-cell-scoped="headerCellScoped"
      :get-compatible-slot-scoped="getCompatibleSlotScoped"
    />
  </span>
</template>
<script>
import CommonMixin from './CommonMixin'
import TypeColumnRenderHeader from './TypeColumnRenderHeader'
export default {
  name: 'CustomHeader',
  components: {
    TypeColumnRenderHeader
  },
  mixins: [CommonMixin],
  props: {
    compatibleColumns: Array,
    headerCellScoped: [Function, Object]
  }
}
</script>
<style lang='scss' scoped>
.TypeColmun-cell{
  display: flex;
  align-items: center;
}
.TypeColmun-header-cell {
  white-space: pre-wrap;
}
.TypeColmun-header-notic-icon {
  margin-left: 4px;
  font-size: 20px;
  font-weight: normal;
  cursor: pointer;
  ::v-deep{
    path{
      fill:#999999
    }
  }
}
</style>
